<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
    <ul>
        <li v-for="(item,index) in arr" :key="item.id">
            <input type="checkbox" :checked="item.is" @click="inps(item.id)">
            <img :src="item.img" alt="">{{item.name}}
            <button v-on:click="del(item.id)">-</button>
            <span>{{item.quantity}}</span>
            <button @click="add(item.id)">+</button>
            价格：{{item.price |fu()}}
        </li>
    </ul>
    <input type="checkbox" @click="select_all()">全选
    <h1>总价:{{fun}}</h1>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            isAll: 'false',
            aa:'',
            arr: [{
                id: 1,
                name: '手机1',
                img: 'https://ts4.tc.mm.bing.net/th/id/OIP-C.S5126NIloq5P7wXcWLhkYAHaJV?w=222&h=280&c=8&rs=1&qlt=90&r=0&o=6&dpr=1.3&pid=3.1&rm=2',
                price: 100,
                quantity: 1,
                is: false
            }, {
                id: 2,
                name: '手机2',
                img: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.9dCOff_Ldw95B2JyJSFuRgHaFj?w=288&h=216&c=8&rs=1&qlt=90&r=0&o=6&dpr=1.3&pid=3.1&rm=2',
                price: 200,
                quantity: 1,
                is: false
            }, {
                id: 3,
                name: '手机3',
                img: 'https://ts3.tc.mm.bing.net/th/id/OIP-C.-EcU22kTfBf4TF-ooR_7oAHaHa?w=250&h=250&c=8&rs=1&qlt=90&r=0&o=6&dpr=1.3&pid=3.1&rm=2',
                price: 300,
                quantity: 1,
                is: false
            },]
        },
        // 事件指令
        methods: {
            // 添加
            add(index) {
                let a = this.arr
                let b = a.find(item => item.id == index)
                b.quantity++
            },
            // 减少
            del(id) {
                let a = this.arr
                let b = a.find(item => item.id == id)
                if (b.quantity > 1) {
                    b.quantity--
                }
            },
            // 全选
            select_all() {
                let select = event.target.checked

                this.arr.forEach(item => {
                    item.is = select
                });

            },
            // 单选
            inps(id){
                let zong=0
                let a=this.arr.find(item=>item.id==id)
                 a.is=  event.target.checked
            }
        },
         // 计算属性
        computed: {
            fun() {
                var zong = 0
                this.arr.forEach(item => {
                    if (item.is == true) {
                        // console.log(item);
                        zong += item.price * item.quantity
                    }
                })
                return zong
            },
        },
        // 过滤器
        filters: {
            fu(price) {
                // console.log(price);
                return '￥' + price.toFixed(2)
            }
        },
       
    })
</script>
<style>
    img {
        width: 200px;
        height: 200px;
    }
</style>